<template>
  <div style="width: 100%; height: 100%; overflow: auto">
    <el-row :gutter="10" style="width: 100%">
      <el-col :xs="24" :sm="24" :md="24" :lg="5">
        <div class="grid-content ep-bg-purple">
          <el-input
            v-model="input2"
            style="width: 100%; margin-bottom: 8px"
            placeholder="部门名称"
            :prefix-icon="Search"
          />
          <el-tree
            style="width: 100%"
            :data="dataSource"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="19">
        <div class="grid-content ep-bg-purple-light">
          <!-- 搜索 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.username"
                placeholder="用户名/昵称/手机号"
                clearable
              />
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                v-model="formInline.status"
                placeholder="全部"
                clearable
                style="width: 100px"
              >
                <el-option label="启用" value="shanghai" />
                <el-option label="禁用" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="formInline.date"
                type="daterange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="~"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" :icon="Search">
                搜索
              </el-button>
              <el-button :icon="Refresh" @click="reset"> 重置 </el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 增删 -->
        <el-card>
          <template #header>
            <div class="card-header">
              <div class="mb-4">
                <el-button type="success" :icon="Plus" @click="adds">
                  新增
                </el-button>
                <el-button
                  type="danger"
                  :icon="Delete"
                  :disabled="isdel"
                  @click="delall"
                >
                  删除
                </el-button>
              </div>
              <div class="flex flex-wrap items-center">
                <el-dropdown split-button @click="handleClick">
                  导入
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :icon="Download">
                        下载模板
                      </el-dropdown-item>
                      <el-dropdown-item :icon="Top">导入数据</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button :icon="Download" style="margin-left: 10px">
                  导出
                </el-button>
              </div>
            </div>
          </template>
          <!-- 表格 -->
          <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="id" label="编号" align="center" width="55" />
            <el-table-column
              prop="username"
              label="用户名"
              width="120"
              align="center"
            />
            <el-table-column
              prop="nickname"
              label="用户昵称"
              width="120"
              align="center"
            />
            <el-table-column
              prop="genderLabel"
              label="性别"
              width="80"
              align="center"
            />
            <el-table-column
              prop="deptName"
              label="部门"
              width="100"
              align="center"
            />
            <el-table-column
              prop="mobile"
              label="手机号码"
              width="150"
              align="center"
            />

            <el-table-column
              prop="status"
              label="状态"
              width="90"
              align="center"
            >
              <template #default="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">
                  {{ scope.row.status == 1 ? "正常" : "禁用" }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="150"
              align="center"
            />
            <el-table-column fixed="right" label="操作" width="280">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  :icon="RefreshLeft"
                  @click="mima(scope.row)"
                >
                  重置密码
                </el-button>
                <el-button
                  link
                  type="primary"
                  :icon="Edit"
                  @click="edits(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  link
                  type="primary"
                  :icon="Delete"
                  @click="del(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :current-page="currentPage4"
            :page-size="pageSize4"
            :page-sizes="[5, 10, 20]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="padding: 15px 15px 0"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  Calendar,
  Search,
  Refresh,
  Plus,
  Delete,
  Top,
  Download,
  RefreshLeft,
  Edit,
} from "@element-plus/icons-vue";
import type Node from "element-plus/es/components/tree/src/model/node";
import { users, importUser } from "@/api/userApi";
const input2 = ref("");

const tableData = ref();
const total = ref();
function getuser() {
  users(
    formInline.value.username,
    formInline.value.status,
    currentPage4.value,
    pageSize4.value
  ).then((res) => {
    // console.log(res);
    if (res.code == "00000") {
      tableData.value = res.data.list;
      total.value = res.data.total;
    }
  });
}

//     formInline.value.startTime,
//     formInline.value.endTime

onMounted(() => {
  getuser();
});
const dataSource = ref([
  {
    id: 3,
    label: "有来技术",
    children: [
      {
        id: 7,
        label: "研发部门",
      },
      {
        id: 8,
        label: "测试部门",
      },
    ],
  },
]);

// 搜索
const formInline = ref({
  username: "",
  status: "",
  startTime: "",
  endTime: "",
});

const onSubmit = () => {
  // console.log("submit!");
  getuser();
};
// 重置
const reset = () => {
  formInline.value = {
    username: "",
    status: "",
    startTime: "",
    endTime: "",
  };
};
// 新增
const adds = () => {};
// 批量删除
const isdel = ref(true);
const delall = () => {};
//
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
// 导入
const deptId = ref();
const handleClick = () => {
  importUser(deptId).then((res) => {
    console.log(res);
  });
};
// 导出
// 编辑
const edits = (row: any) => {};
// 删除
const del = (row: any) => {};
// 重置密码
const mima = (row: any) => {};
// 分页
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  pageSize4.value = val;
  getuser();
};
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
  currentPage4.value = val;
  getuser();
};
</script>
  
  <style scoped>
.grid-content {
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 15px;
  box-sizing: border-box;
  width: 100%;
}
.ep-bg-purple {
  padding: 20px;
}
.demo-form-inline {
  padding: 20px 15px 3px;
  margin-bottom: 15px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>